<template>
  <div>
    <div class="navbar">
      <div class="navbar-content">
        <div class="left">
          <img src="../assets/images/gh.png" style="width: 66px;height: 66px;"/>
          <div class="nav-title" style="margin-left: 20px;color: white;">惺惺惜惺惺系统</div>
        </div>
        <!-- position: absolute;left: 50%;transform: translateX(-50%); -->
        <div class="center">
          <div class="menuItem" v-for="(item, index) in getmenus" :key="index"
               :class="{ 'active': item.path == activeMenu }">
            <router-link
              :to="item.children && item.children.length > 0 ? item.path + '/' + item.children[0].path : item.path">
              {{ item.meta.title }}
            </router-link>
          </div>
        </div>
        <div class="right" style="flex-shrink: 0;">
          <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
            <div class="avatar-wrapper">
              <img src="../assets/images/avatar.png" style="width: 52px;height: 52px;margin-right: 15px;"/>
              <div style="color: white;">{{ name }}</div>
              <i class="el-icon-caret-bottom"/>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided @click.native="logout">
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </div>
      </div>
    </div>
    <div class="app-main">
      <el-scrollbar class="el-scrollbar">
        <router-view v-if="!$route.meta.link"/>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import ResizeMixin from './mixin/ResizeHandler'
import {mapState} from 'vuex'
import variables from '@/assets/styles/variables.scss'

export default {
  name: 'Layout',
  mixins: [ResizeMixin],
  computed: {
    activeMenu() {
      const route = this.$route;
      const {meta, path} = route;
      let url = path;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        url = meta.activeMenu;
      }
      let arr = url.split('/');
      url = '/' + arr[1]
      return url;
    },

    getmenus() {
      let topbarRouters = this.$store.getters.topbarRouters || [];
      let obj = null
      topbarRouters.map((v) => {
        if (v.path == '/web') {
          obj = v
        }
      })
      if (obj) {
        return obj.children
      }
      return []
    },
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      name: state => state.user.name,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      return variables;
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', {withoutAnimation: false})
    },

    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 300px;
  background-image: url('../assets/images/navbar-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-bottom: -200px;

  .navbar-content {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;


    .left {
      display: flex;
      align-items: center;
      font-size: 20px;
      flex-shrink: 0;


      @media (max-width: 1500px) {
        .nav-title {
          display: none;
        }
      }


    }

    .center {
      display: flex;
      justify-content: center;
      overflow: hidden;
      width: 100%;

      .active {
        color: white !important;
        background-color: rgba(255, 255, 255, 0.108);
        opacity: 1 !important;
      }

      .menuItem {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 35px;
        line-height: 35px;
        padding: 0px 26px;
        border-radius: 35px;
        color: #F9FBFF;
        opacity: 0.8;
      }
    }

    .right {
      cursor: pointer;

      .avatar-wrapper {
        display: flex;
        align-items: center;
      }

    }

    @media (max-width: 1100px) {

      .left,
      .right {
        display: none;
      }
    }
  }
}

.app-main {
  height: calc(100vh - 100px);
  width: 100%;
  overflow: hidden;

  ::v-deep .el-scrollbar {
    height: 100%;

    .el-scrollbar__wrap {
      overflow: inherit;
      overflow-y: scroll;
    }
  }
}
</style>
